﻿@page "/diagramcomponent/venn-diagram"

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal
@using System.Collections.ObjectModel
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes classifications of data science using Venn diagrams. Diagram nodes and annotations are used to define Venn diagrams. Read-only mode is enabled in this example.</p>
</SampleDescription>
<ActionDescription>
    <p>This example shows how to create a Venn diagram using the Diagram control.In this example, zoom and pan options are enabled.The <code class="language-text">Tool</code> property of the Diagram control allows you to enable and disable zoom and pan options.</p><br>
</ActionDescription>
@*Hidden:Lines*@
<div class="control-section" style="padding:0px">
    <div style="text-align:center">
        @*End:Hidden*@
        <SfDiagramComponent Height="580px" Nodes="@NodeCollection" Tool="@DiagramTools.ZoomPan">
            <SnapSettings Constraints="@SnapConstraints.None"></SnapSettings>
        </SfDiagramComponent>
        @*Hidden:Lines*@
    </div>
</div>
<style>
    .row {
        display: block;
    }

    #container {
        display: block;
    }
</style>
@*End:Hidden*@

@code{
    //Defines diagrams's nodes collection
    public DiagramObjectCollection<Node> NodeCollection
    {
        get;
        set;
    }

    protected override void OnInitialized()
    {
        NodeCollection = new DiagramObjectCollection<Node>();


        #region BpmnShapeModel
        ShapeAnnotation DatascienceAnnot = new ShapeAnnotation()
        {
            Content = "Data Science",
            Offset = { X = 0.5, Y = 0.10 },
            Style = new TextShapeStyle() { FontSize = 14, Bold = true }
        };

        Node DatascienceNode = new Node()
        {
            ID = "datascience",
            OffsetX = 450,
            OffsetY = 232,
            Width = 400,
            Height = 400,
            Style = new ShapeStyle() { Fill = "white", StrokeColor = "#acacac", StrokeWidth = 1 },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                DatascienceAnnot
            }

        };
        NodeCollection.Add(DatascienceNode);

        DiagramObjectCollection<ShapeAnnotation> TrignometryAnnot = new DiagramObjectCollection<ShapeAnnotation>()
{
             new ShapeAnnotation() { Content = "Trignometry", Offset = { X = 0.8, Y = 0.4 }, HorizontalAlignment = HorizontalAlignment.Left },
             new ShapeAnnotation()   { Content = "Thesis", Offset = { X = 0.45, Y = 0.8 }}
        };


        Node TrignometryNode = new Node()
        {
            ID = "trignometry",
            OffsetX = 515,
            OffsetY = 205,
            Width = 200,
            Height = 200,
            Style = new ShapeStyle() { Fill = "#feb42f", StrokeColor = "#feb42f", Opacity = 0.2 },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = TrignometryAnnot

        };
        NodeCollection.Add(TrignometryNode);

        ShapeAnnotation ExpertiseAnnot = new ShapeAnnotation() { Content = "Expertise", Offset = { X = 0.5, Y = 0.8 }, VerticalAlignment = VerticalAlignment.Top };

        Node ExpertiseNode = new Node()
        {
            ID = "expertise",
            OffsetX = 445,
            OffsetY = 290,
            Width = 200,
            Height = 200,
            Style = new ShapeStyle() { Fill = "#6acbd4", StrokeColor = "#6acbd4", Opacity = 0.2 },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                ExpertiseAnnot
            }

        };
        NodeCollection.Add(ExpertiseNode);

        DiagramObjectCollection<ShapeAnnotation> ProgrammingAnnot = new DiagramObjectCollection<ShapeAnnotation>(){
            new ShapeAnnotation() { Content = "Programming", Offset = { X = 0.15, Y = 0.4 }, HorizontalAlignment = HorizontalAlignment.Right },
            new ShapeAnnotation(){ Content = "Assembly", Offset = { X = 0.98, Y = 0.35 }, HorizontalAlignment = HorizontalAlignment.Left },
            new ShapeAnnotation(){ Content = "Horizon", Offset = { X = 0.95, Y = 0.6 }, HorizontalAlignment = HorizontalAlignment.Left },
            new ShapeAnnotation(){ Content = "Middleware", Offset = { X = 0.7, Y = 0.8 }, HorizontalAlignment = HorizontalAlignment.Left },
        };
        Node ProgrammingNode = new Node()
        {
            ID = "programming",
            OffsetX = 388,
            OffsetY = 205,
            Width = 200,
            Height = 200,
            Style = new ShapeStyle() { Fill = "#ed1d79", StrokeColor = "#ed1d79", Opacity = 0.2 },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = ProgrammingAnnot

        };
        NodeCollection.Add(ProgrammingNode);


        #endregion
    }
}
